<template>
  <div>
    <div class="title">出行防疫地区选择</div>

    <van-field
      v-model="goCity"
      is-link
      readonly
      label="出发城市"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择出发城市"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>

    <van-field
      v-model="toCity"
      is-link
      readonly
      label="出发城市"
      placeholder="请选择所在地区"
      @click="show2 = true"
    />
    <van-popup v-model="show2" round position="bottom">
      <van-cascader
        v-model="cascaderValue2"
        title="请选择出发城市"
        :options="options"
        @close="show = false"
        @finish="toFinish"
      />
    </van-popup>

    <!-- 查询按钮 -->
    <van-button type="info" size="large" @click="search">查询按钮</van-button>
    <div>
        <div>出发城市：{{from_info.low_in_desc}}</div>
        <div>到达城市:{{to_info.low_in_desc}}</div>
    </div>
  </div>
</template>

<script>
import api from "../../api/index";
export default {
  data() {
    return {
      show: false,
      show2: false,
      goCity: "",
      toCity: "",
      from:'',
      to:'',
      cascaderValue: "",
      cascaderValue2: "",
      from_info:'',
      to_info:'',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({value, selectedOptions, tabIndex}) {
        console.log(value, selectedOptions, tabIndex);
        this.from=value
      this.show = false;
      this.goCity = selectedOptions.map((option) => option.text).join("/");
    },
    toFinish({value, selectedOptions, tabIndex}) {
        this.to=value
      this.show2 = false;
      this.toCity = selectedOptions.map((option) => option.text).join("/");
    },
    search(){
        console.log('查询++++',this.from,this.to);
        //请求接口
        api.getTravelQuery({
            from:this.from,
            to:this.to
        })
        .then(res=>{
            console.log('查询城市+----',res.data);
            this.from_info=res.data.result.from_info
            this.to_info=res.data.result.to_info
        })
        
    }
  },
  created(){
      api.getTravel()
      .then(res=>{
          console.log(res.data);
          let result=res.data.result;
          let arr=[];
          result.forEach(item=>{
              console.log(item.province);
              console.log(item.province_id);
              let obj={};
              obj.text=item.province;
              obj.value=item.province_id;
              obj.children=[];
            //   console.log('obj'+obj);
              item.citys.forEach(ele=>{
                  let child={};
                  child.text=ele.city;
                  child.value=ele.city_id
                  //最佳给obj.children=[]
                  obj.children.push(child)
                //   console.log('child'+child);
              })
              arr.push(obj)
          })
        //   console.log('quanbu-----',arr);
          this.options=arr
      })
  }
};
</script>

<style lang="less" scoped>
</style>